<style>
  .transfer-list {
        position: relative;
        line-height: 1.5;
        display: inline-block;
        width: 250px;
        height: 400px;
        font-size: 14px;
        vertical-align: middle;
        position: relative;
        padding-top: 35px;
    }
    .transfer-list-header{
        padding: 8px 16px;
        background: #f9fafc;
        color: #515a6e;
        border: 1px solid #dcdee2;
        border-bottom: 1px solid #e8eaec;
        border-radius: 6px 6px 0 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .transfer-list-body{
        height: 100%;
        border: 1px solid #dcdee2;
        border-top: none;
        border-radius: 0 0 6px 6px;
        position: relative;
        overflow: hidden;
    }
    .transfer-operation {
        display: inline-block;
        margin: 0 16px;
        vertical-align: middle;
    }
    .transfer-list-body-with-search{
        padding-top: 34px;
    }
    .transfer-list-body-content{
        padding: 6px 0 0;
        height: 100%;
        padding: 4px 0;
        overflow: auto;
    }
    .transfer-list-content-item:hover {
        background: #f3f3f3;
    }
    .transfer-list-content-not-found{
        display: block;
        text-align: center;
        color: #c5c8ce;
    }
    .transfer-list-content-item {
        margin: 0;
        line-height: normal;
        padding: 7px 16px;
        clear: both;
        color: #515a6e;
        font-size: 14px !important;
        white-space: nowrap;
        list-style: none;
        cursor: pointer;
        transition: background 0.2s ease-in-out;
    }
    .transfer-list-body-search-wrapper {
        padding: 8px 8px 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;

    }
</style>
<template>
  <div>
    <div class="transfer-list">
      <div class="transfer-list-header">
        <Checkbox v-model="leftCheckAll" @on-change="leftAllCheck" :disabled="leftInfoList.length < 1"></Checkbox>
        <span class="ivu-transfer-list-header-title">{{title[0]}}</span>
        <span class="ivu-transfer-list-header-count">{{leftInfoList.length}}</span>
      </div>
      <div class="transfer-list-body transfer-list-body-with-search">
        <div class="transfer-list-body-search-wrapper">
          <Input search v-model="leftInput" size="small" @on-search="addSearchUser" placeholder="新增人员名称">
          <!-- <Icon type="ios-contact" slot="prefix" /> -->
          </Input>
        </div>
        <ul class="transfer-list-body-content">
          <template v-if="leftInfoList.length > 0">
            <CheckboxGroup v-model="leftCheckList" @on-change="leftCheck">
              <template v-for="item in leftInfoList">
                <li class="transfer-list-content-item">
                  <Checkbox :label="item.id">
                    <span style="margin-left: 8px">{{item.user_name + (item.isleader == 1 ? "(领导)":'')}}</span>
                <li v-for="i in item.structs " style="margin-left: 28px;font-size:10px; color:#c5c8ce;">{{i.gName + (i.isleader == 1 ? "(领导)":'')}}</li>
                </Checkbox>
                </li>
              </template>
            </CheckboxGroup>
          </template>
          <li v-else class="transfer-list-content-not-found">{{leftNotFindMsg}}</li>
        </ul>
      </div>
    </div>
    <div class="transfer-operation ">
      <Button :disabled="rightCheckList.length == 0" type="primary" size="small" @click="dleRight()">
        <Icon type="ios-arrow-back" style="padding-right:4px" /><span>移除</span></Button>
      <Button :disabled="leftCheckList.length == 0" type="primary" style="display: block;margin-top:8px" size="small"
        @click="addRight()">新增
        <Icon type="ios-arrow-forward" style="padding-left:4px" /></Button>
    </div>
    <div class="transfer-list">
      <div class="transfer-list-header">
        <Checkbox v-model="rightCheckAll" @on-change="rightAllCheck" :disabled="rightInfoList.length < 1"></Checkbox>
        <span class="ivu-transfer-list-header-title">{{title[1]}}</span>
        <span class="ivu-transfer-list-header-count">{{rightInfoListTemp.length}}</span>
      </div>
      <div class="transfer-list-body transfer-list-body-with-search">
        <div class="transfer-list-body-search-wrapper">
          <Input @on-clear="backList" clearable search v-model="rightInput" size="small" @on-search="searchUser"
            placeholder="搜索人员名称" />
        </div>
        <ul class="transfer-list-body-content">
          <template v-if="rightInfoList.length > 0">
            <CheckboxGroup v-model="rightCheckList" @on-change="rightCheck">
              <template v-for="item in rightInfoList">
                <li class="transfer-list-content-item">
                  <Checkbox :label="item.id">
                    <span style="margin-left: 8px">{{item.user_name + (item.isleader == 1 ? "(领导)":'')}}</span>
                <li v-for="i in item.structs " style="margin-left: 28px;font-size:10px; color:#c5c8ce;">{{i.gName + (i.isleader == 1 ? "(领导)":'')}}</li>
                </Checkbox>
                </li>
              </template>
            </CheckboxGroup>
          </template>
          <li v-else class="transfer-list-content-not-found">列表为空</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import ajax from "../ajax_util.js"
  export default {
    name: "transfer",
    data() {
      return {
        edit: false,
        leftNotFindMsg: "列表为空",
        leftCheckAll: false, //左边全选按钮
        leftCheckList: [], //左边选择集合
        leftInfoList: [], //左边数据集合
        leftInput: "", //左边搜索值

        rightCheckAll: false, //右边全选按钮
        rightCheckList: [], //右边选择集合
        // rightInfoList: [],      //右边数据集合
        rightInput: "", //右边搜索值
        rightInfoListTemp: [], //右边选择框原始数据
      }
    },
    mounted: function() {
      var temp = JSON.stringify(this.rightInfoList)
      this.rightInfoListTemp = JSON.parse(temp)
    },

    methods: {
      // 新增
      addRight() {
        this.leftCheckList.forEach(item => {
          this.leftInfoList.forEach((i, index) => {
            if (i.id == item) {
              this.rightInfoList.push(i)
              this.leftInfoList.splice(index, 1)
            }
          })
        })
        this.leftCheckList = []
        if (this.leftCheckAll) {
          this.leftCheckAll = false
        }
      },
      // 移除
      dleRight() {
        var t = JSON.stringify(this.rightInfoList)
        var temp = JSON.parse(t)
        this.rightCheckList.forEach(item => {
          this.rightInfoList.forEach((i, index) => {
            if (i.id == item) {
              this.leftInfoList.push(i)
              temp.splice(index, 1)
            }
          })
          this.rightInfoListTemp.forEach((i, index) => {
            if (i.id == item) {
              this.rightInfoListTemp.splice(index, 1)
            }
          })
        })
        this.rightCheckList = []

        this.rightInfoList = this.rightInfoListTemp
        this.rightInput = ""
        if (this.rightCheckAll) {
          this.rightCheckAll = false
        }
      },
      // 清楚输入框时回复右边是数据
      backList() {
        this.rightInfoList = this.rightInfoListTemp
      },
      // 右边多选按钮控制
      rightCheck(value) {
        if (value.length == this.rightInfoList.length && !this.rightCheckAll) {
          this.rightCheckAll = true
        } else if (value.length != this.rightInfoList.length && this.rightCheckAll) {
          this.rightCheckAll = false
        }
      },
      // 右边全选按钮控制
      rightAllCheck(value) {
        if (value) {
          var temp = []
          this.rightInfoList.forEach(item => {
            temp.push(item.id)
          })
          this.rightCheckList = temp
        } else {
          this.rightCheckList = []
        }
      },
      //右边搜索人员
      searchUser(value) {
        console.log(value)
        var tempList = []
        this.rightInfoList.forEach((item, index) => {
          if (item.user_name.indexOf(value) != -1) {
            tempList.push(item)
          }
        })
        this.rightInfoList = tempList
      },

      // 左边多选按钮控制
      leftCheck(value) {
        if (value.length == this.leftInfoList.length && !this.leftCheckAll) {
          this.leftCheckAll = true
        } else if (value.length != this.leftInfoList.length && this.leftCheckAll) {
          this.leftCheckAll = false
        }
      },
      // 左边全选按钮控制
      leftAllCheck(value) {
        if (value) {
          var temp = []
          this.leftInfoList.forEach(item => {
            temp.push(item.id)
          })
          this.leftCheckList = temp
        } else {
          this.leftCheckList = []
        }
      },
      //左边搜索人员
      addSearchUser(value) {
        if (value != null && value != "") {
          this.utils.delay(() => {
            var that = this;
            var url = this.CONFIG.url_know + "/searchUser/" + value;
            ajax.get({
              url: url,
              that: that,
              params: null,
              success: function(data) {
                that.leftInfoList = []
                data.forEach(item => {
                  var t = that.rightInfoList.find(e => e.id == item.id)
                  if (t === undefined) {
                    that.leftInfoList.push(item)
                  } else {
                    that.leftNotFindMsg = that.existence
                  }
                })
              }
            })
          }, 500)
        }
      },
    },
    props: {
      value: {},
      title: {
        default: ["未授权", "已授权"]
      },
      listName: {
        type: String,
        default: ""
      },
      existence: {
        type: String,
        default: "该用户已在部门下"
      }
    },
    computed: {
      rightInfoList: {
        get: function() {
          return this.value;
        },
        set: function(value) {
          this.$emit('input', value);
        }
      },
    },
  }
</script>
